import React, { useState, useEffect } from 'react';
import { Table } from 'antd';

const columns = [
  {
    title: "用户名",
    width: 100,
    dataIndex: 'username',
    fixed: 'left',
  },
  // {
  //   title: "密码",
  //   width: 100,
  //   dataIndex: 'password',
  // },
  // {
  //   title:"姓名",
  //   width:100,
  //   dataIndex:'name',
  // },
  {
    title: "电话号码",
    width: 100,
    dataIndex: 'mobile',
  },
  {
    title: "身份",
    width: 100,
    dataIndex: 'role',
  },
  {
    title: '操作',
    fixed: 'right',
    width: 90,
    render: () => <a href='/usercenter/modify'>修改信息</a>,
  },
];

const roleMap = {
  1: '管理员',
  2: '普通用户',
  3: '家政人员',
  // 如果有其他角色，可以在此处添加
};

const Message = () => {
  const [userData, setUserData] = useState([]);

  useEffect(() => {
    // 从 localStorage 获取数据
    const fetchUserData = () => {
      try {
        // 获取存储在 localStorage 中的用户数据
        const username = localStorage.getItem('username');
        const name = localStorage.getItem('name');
        const mobile = localStorage.getItem('mobile');
        const role = localStorage.getItem('role');
        console.log(mobile);
        console.log(role);
        // 如果 username, mobile 或 role 存在，则将其设置为 userData 的数据源
        if (username && name && mobile && role) {
          const roleText = roleMap[parseInt(role, 10)] || '未知身份';
          setUserData([{ username, name, mobile, role: roleText }]);
        }
      } catch (error) {
        console.error('Error fetching user data from localStorage:', error);
      }
    };

    fetchUserData();
  }, []); // 空依赖数组，在组件挂载后仅运行一次
  

  return (
    <Table
    key={userData.mobile}
      columns={columns}
      dataSource={userData}
      scroll={{ x: 1300 }} //宽度，根据需求调整
      pagination={false}
      bordered
    />
  );
};

export default Message;
